import React from 'react'
import { useAppDispatch, useAppSelector } from '../redux/hooks'
import { insert, asyncList } from '../redux/store'
// 定义新的获取state数据和获取dispatch函数的方法
export default function List() {
  const state = useAppSelector((state) => {
    return state.list
  })
  const dispatch = useAppDispatch()
  return (
    <>
      <br />
      <input
        type="text"
        onKeyDown={(e) => {
          //   console.log(e.key)

          const value = e.target.value.trim()
          if (e.key !== 'Enter') return
          dispatch(insert(value))
        }}
      />
      <br />
      <button
        onClick={() => {
          dispatch(asyncList())
        }}
      >
        异步获取数据,添加到数组中
      </button>
      <ul>
        {state.map((item, index) => {
          return <li key={index}>{item}</li>
        })}
      </ul>
    </>
  )
}
